import React, { useState } from 'react';
import { Button, Modal, Input, Radio, Select, Space, Image } from 'antd';
import Toptitle from '../Compon/Toptitle';
import type { ConfigProviderProps, RadioChangeEvent, SelectProps } from 'antd';

export default function ButtonCon(props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [content, setContent] = useState(props.content);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    // console.log(content);
    setContent(content);
    props.changecontent_list(content)
      ? props.changecontent_list(content)
      : null;
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleChange = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };
  const options: SelectProps['options'] = [
    { value: '御姐', label: '御姐' },
    { value: '00后', label: '00后' },
    { value: '90后', label: '90后' },
    { value: '80后', label: '80后' },
    { value: '70后', label: '70后' },
  ];

  const handleChange2 = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };

  const options2: SelectProps['options'] = [
    { value: '中字', label: '中字' },
    { value: '无字幕', label: '无字幕' },
  ];

  const handleChange3 = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };

  const options3: SelectProps['options'] = [
    { value: '大陆', label: '大陆' },
    { value: '韩国', label: '韩国' },
    { value: '日本', label: '日本' },
    { value: '台湾', label: '台湾' },
    { value: '香港', label: '香港' },
    { value: '欧美', label: '欧美' },
    { value: '其他', label: '其他' },
  ];
  const handleChange4 = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };

  const options4: SelectProps['options'] = [
    { value: '精选', label: '精选' },
    { value: '推荐', label: '推荐' },
    { value: '热门', label: '热门' },
    { value: '最新', label: '最新' },
    { value: '其他', label: '其他' },
  ];
  const handleChange5 = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };

  const options5: SelectProps['options'] = [
    { value: '猜你喜欢', label: '猜你喜欢' },
    { value: '推荐', label: '推荐' },
    { value: '热门', label: '热门' },
    { value: '最新', label: '最新' },
    { value: '其他', label: '其他' },
  ];
  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
  };
  return (
    <div>
      <Button type="primary" onClick={showModal}>
        {props.name}
      </Button>
      <Modal
        title={props.title}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <br />
        <br />
        <Toptitle title="基本信息" />
        {content._id}
        标题：
        <Input
          placeholder="请输入标题"
          value={content.title}
          onChange={(e) => {
            setContent({ ...content, title: e.target.value });
          }}
        />
        <br />
        <br />
        封面：
        <Image
          src={content.type_video.type_img?content.type_video.type_img:''}
          width={100}
          height={50}
          onChange={(e) => {
            setContent({
              ...content,
              type_video: { ...content.type_video, type_img: e.target.value },
            });
          }}
        />
        <br />
        <br />
        视频：
        <video
          width="320"
          height="240"
          controls
          src={content.type_video.video_url}
          onChange={(e) => {
            setContent({
              ...content,
              type_video: { ...content.type_video, video_url: e.target.value },
            });
          }}
        ></video>
        <br />
        <br />
        描述信息'
        <Input
          placeholder="请输入描述"
          value={content.video_desc}
          onChange={(e) => {
            setContent({ ...content, video_desc: e.target.value });
          }}
        />
        <br />
        <br />
        审核状态：
        <Radio.Group
          value={content.status}
          onChange={(e) => {
            setContent({ ...content, status: e.target.value });
          }}
        >
          <Radio value={1}>通过</Radio>
          <Radio value={2}>未通过</Radio>
        </Radio.Group>
        <br />
        <br />
        {/* <Toptitle title="个性信息" />
        标签：
        <Select
          mode="multiple"
          size="middle"
          placeholder="请选择类型"
          // defaultValue={}
          onChange={handleChange}
          style={{ width: '100%' }}
          options={options}
        />
        <br />
        <br />
        视频价格:
        <Input placeholder="请输入视频价" />
        <br />
        <br />
        <span>默认为0 则是免费</span>
        筛选分类：
        <div style={{ display: 'flex' }}>
          <Select
            mode="multiple"
            size="middle"
            placeholder="请选择类型"
            // defaultValue={}
            onChange={handleChange2}
            style={{ width: '100%' }}
            options={options2}
          />
          <Select
            mode="multiple"
            size="middle"
            placeholder="请选择类型"
            // defaultValue={}
            onChange={handleChange3}
            style={{ width: '100%' }}
            options={options3}
          />
        </div>
        <br />
        <br />
        所属频道:
        <Select
          mode="multiple"
          size="middle"
          placeholder="请选择类型"
          // defaultValue={}
          onChange={handleChange4}
          style={{ width: '100%' }}
          options={options4}
        />
        <br />
        <br />
        所属模块：
        <Select
          mode="multiple"
          size="middle"
          placeholder="请选择类型"
          // defaultValue={}
          onChange={handleChange5}
          style={{ width: '100%' }}
          options={options5}
        />
        <br />
        <br /> */}
      </Modal>
    </div>
  );
}
